<template>
  <div class="shipment-wrapper  full-height">
    <p class="shipment-number"><span class="bold">Shipment#:</span> {{shipmentNumber}}</p>
    <section class="section-title">
      <h3>Shiped  Items Preview</h3>
    </section>
    <section class="table-size">
      <div class="table-size-cnt">
        Table size
        <Radio-group v-model="tableSize" type="button">
          <Radio label="large">large</Radio>
          <Radio label="default">medium(default)</Radio>
          <Radio label="small">small</Radio>
        </Radio-group>
      </div>
    </section>
    <section class="data-list">
      <Table border no-data-text :size="tableSize" :loading="tableDataloading" ref="waitToConfirm" :columns="tableColumns" :data="shipmentDetailData" v-if="shipmentDetailData.length"></Table>
      <div v-show="notableDataTip">
        <Alert type="warning" class="no-data-alter">
          A warning prompt
          <template slot="desc">
            No data for wait to ship!!
          </template>
        </Alert>
      </div>
    </section>
    <section class="section-title">
      <h3>Invoice details</h3>
    </section>
    <ul class="invoice-detail-list">
      <li><p>*Fullfillment:</p><p>{{ shipmentDetailObj.fullfillment }}</p></li>
      <li><p>*Supplier Courier:</p><p>{{ shipmentDetailObj.supplierCourier }}</p></li>
      <li><p>*Dispatch Date:</p><p>{{ shipmentDetailObj.dispatchDate }}</p></li>
      <li><p>*ETA:</p><p>{{ shipmentDetailObj.ETA }}ETA</p></li>
      <li><p>*Tracking No.:</p><p>{{ shipmentDetailObj.tracking }}</p></li>
      <li><p>*Shipping fee:</p><p>{{ shipmentDetailObj.shippingFee }}</p></li>
      <li><p>*Invoice No.:</p><p>{{ shipmentDetailObj.invoice }}</p></li>
      <li><p>*Invoice Date:</p><p>{{ shipmentDetailObj.invoiceDate }}</p></li>
      <li>
        <p>*Invoice Attachment:</p>
        <section class="invoice-wrapper">
          <div class="invoice-attachment" v-for="(item, index) in shipmentDetailObj.invoiceAttachment" :key="index">
            <div class="invoice-attachment-file">
              <!--<img :src="item.default_img">-->
              <img src="../../../../assets/images/pdf-default-icon.png" alt="" v-if="item.default_img == 'pdf'">
              <img src="../../../../assets/images/excel-default-icon.jpg" alt="" v-if="item.default_img == 'excel'">
              <p class="invoice-attachment-icons">
                <Icon type="ios-cloud-download-outline" class="icon" />
              </p>
            </div>
            <p class="invoice-attachment-name">{{item.name}}</p>
          </div>
        </section>
      </li>
      <li><p>*Notes:</p><p>{{ shipmentDetailObj.notes }}</p></li>
    </ul>

    <Modal title="View Image" v-model="invoiceAttachmentVisible">
      <img :src="shipmentDetailObj.invoiceAttachment" v-if="invoiceAttachmentVisible" style="width: 100%">
    </Modal>
    <!--<ShipmentForm :shipmentList="shipmentList" :shipmentForm="shipmentForm"  :shipAction="shipAction"></ShipmentForm>-->
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex';
  import ShipmentForm from '@/components/ShipmentForm.vue';
  import { shipmentDetail } from '@/api/index';
  export default {
    name: 'ShipmentDetail',
    components: { ShipmentForm },
    data () {
      return {
        shipAction: 'edit',
        shipmentNumber: '',
        tableDataloading: true,
        notableDataTip: false,
        tableSize: 'default',
        confirmBtnDisable: true,
        shipmentList: [],
        shipmentDetailObj: {
          fullfillment: '',
          supplierCourier: '',
          dispatchDate: '',
          ETA: '',
          tracking: '',
          shippingFee: '$0',
          invoice: '',
          invoiceDate: '',
          invoiceAttachment: [
            {
            	name: 'Marco invoice.pdf',
              default_img: 'pdf'
            },
            {
            	name: 'Marco2 invoice.pdf',
              default_img: 'pdf'
            },
            {
            	name: 'Marco3 invoice.pdf',
              default_img: 'pdf'
            },
            {
            	name: 'Marco4 invoice.xlsx',
              default_img: 'excel'
            },
            {
            	name: 'Marco35invoice.xlsx',
              default_img: 'excel'
            }
          ],
          notes: ''
        },
        invoiceAttachmentVisible: false,
        shipmentDetailData: [],
        tableColumns: [
          {
            title: 'Tag',
            align: 'center',
            width: 90,
            fixed: 'left',
            key: 'tag'
          },
          {
            title: 'UPC',
            align: 'center',
            minWidth: 125,
            fixed: 'left',
            key: 'UPC'
          },
          {
            title: 'From PO',
            align: 'center',
            minWidth: 150,
            key: 'from_PO'
          },
          {
            title: 'Category',
            align: 'center',
            width: 160,
            key: 'category'
          },
          {
            title: 'Brand',
            align: 'center',
            minWidth: 130,
            key: 'brand'
          },
          {
            title: 'Product Code',
            width: 85,
            align: 'center',
            key: 'product_code'
          },
          {
            title: 'Product Name',
            minWidth: 185,
            key: 'product_name'
          },
          {
            title: 'Colour Code',
            width: 80,
            align: 'center',
            key: 'colour_code'
          },
          {
            title: 'Size',
            width: 65,
            align: 'center',
            key: 'size'
          },
          {
            title: 'Order QTY',
            width: 70,
            align: 'center',
            key: 'order_QTY'
          },
          {
            title: 'Exp. QTY',
            width: 70,
            align: 'center',
            key: 'Exp_QTY'
          },
          {
            title: 'Unit Price',
            align: 'center',
            width:110,
            key: 'unit_price'
          },
          {
            title: 'Discount',
            align: 'center',
            width:110,
            key: 'discount'
          },
          {
            title: 'Special Discount',
            align: 'center',
            minWidth:150,
            key: 'special_discount'
          },
          {
            title: 'Net Price',
            width: 90,
            align: 'center',
            key: 'net_price'
          },
          {
            title: 'Total Price',
            width: 100,
            align: 'center',
            key: 'total_price'
          }
        ]
      }
    },
    computed:{},
    created () {

      this.shipmentNumber = decodeURI(this.$route.query.shipment);
      this.initData();
    },
    methods: {
      initData () {
        shipmentDetail().then(res => {
          this.$Loading.start();
          let resObj = res.data;
          if (!!resObj) {
            this.$Loading.finish();
            this.tableDataloading = false;
            this.shipmentList =  resObj.data.shiped_items;
            this.shipmentDetailObj = resObj.data.invoice_detail;
//            this.shipmentDetailObj.invoiceAttachment = resObj.data.invoice_detail.invoiceAttachment;
            this.shipmentDetailObj.invoiceAttachment = [
              {
                name: 'Marco invoice.pdf',
                default_img: 'pdf'
              },
              {
                name: 'Marco2 invoice.pdf',
                default_img: 'pdf'
              },
              {
                name: 'Marco3 invoice.pdf',
                default_img: 'pdf'
              },
              {
                name: 'Marco4 invoice.xlsx',
                default_img: 'excel'
              },
              {
                name: 'Marco35invoice.xlsx',
                default_img: 'excel'
              }
            ];
            let shipmentListLen = this.shipmentList.length;
            if (shipmentListLen > 0) {
              this.tableDataloading = false;
              this.shipmentDetailData = this.shipmentList;
              let orderQTY = 0, ExpQTY = 0, netPrice = 0, totalPrice = 0;
              let priceCurrencyUnit = this.shipmentList[0].net_price.replace(/[!(^0-9)]/ig, '');
              let alreadyHasTotalObj = this.shipmentList.some(function (item) {
                return item.tag == 'Total';
              });
              if (alreadyHasTotalObj) {
                return;
              }
              this.shipmentList.forEach(item => {
                let orderQTYValue = parseInt(item.order_QTY), ExpQTYValue = parseInt(item.Exp_QTY);
                let netPriceValue = parseFloat(item.net_price.replace(priceCurrencyUnit, ''));
                let totalPriceValue = parseFloat(item.total_price.replace(priceCurrencyUnit, ''));
                orderQTY += orderQTYValue;
                ExpQTY += ExpQTYValue;
                netPrice += netPriceValue;
                totalPrice += totalPriceValue;
              });
              let totalObj = {
                tag: 'Total',
                order_QTY: orderQTY,
                Exp_QTY: ExpQTY,
                net_price: priceCurrencyUnit + netPrice,
                total_price: priceCurrencyUnit + totalPrice
              }
              this.shipmentDetailData[shipmentListLen] = totalObj;
            } else {
              this.notableDataTip = true;
            }
          } else {
            this.$Loading.error();
            this.notableDataTip = true;
          }
        });
      },
      viewInvoice () {
      	this.invoiceAttachmentVisible = true;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../../assets/sass/mixin';
  .full-height {
    min-height: 100% !important;
  }
  .shipment-number {
    padding-bottom: 15px;
    text-align: left;
    border-bottom: 1px solid #e9eaec;
    .bold {
      font-weight: bold;
    }
  }
  .invoice-detail-list {
    li {
      padding: 8px 20px;
      @include fj('flex-start');
      p {
        &:first-child {
          width: 160px;
          text-align: left;
        }
        padding-right: 20px;
      }
    }
  }
  .invoice-wrapper {
    @include fj(flex-start);
    margin-bottom: 15px;
  }
  .invoice-attachment {
    width: 90px;
    height: 90px;
  }
  .invoice-attachment-file {
    @include fj;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    img {
      margin: 0 auto;
    }
    .invoice-attachment-icons {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      padding: 0;
      color: #fff;
      left: 0;
      top: 0;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.6);
      cursor: pointer;
      box-shadow: 0 1px 1px rgba(0,0,0,.2);
      margin-right: 4px;
      .icon {
        margin: 0 auto;
        font-size: 25px;
        font-weight: bold;
      }
    }
    &:hover {
      .invoice-attachment-icons {
        @include fj;
      }
    }
  }
  .invoice-attachment-name {
    overflow: hidden;
    width: 100%;
    padding: 0 !important;
    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    font-size: 12px;
    text-align: center;
  }
</style>
